<template>
  <header class="jx-index-header" :class="[{'isDay':isDay}]">


<!--    //更多-->
    <img  @click="showLeft" class="more" :src="!isDay?day_more:day_more" alt=""/>

    <!--  头部导航系统名开始  -->
    <div class='jx-index-header-content'>
      <!--  黑天-->
      <img @click="dayNightChange(1)" class="" :src="!isDay?nigiht_night:day_night" alt=""/>
      <!--  白天-->
      <img @click="dayNightChange(2)" class="" :src="!isDay?nigiht_day:day_day" alt=""/>

      <el-tooltip class="item" effect="light" content="敬请期待" placement="bottom">
        <div class="waller">
          <span>Connect waller</span>
          <img src="../../assets/PC_day/钱包@2x.png" alt="">
        </div>
      </el-tooltip>

    </div>
    <!--  头部导航系统名结束  -->


  </header>
</template>


<script>
  import { mapState, mapMutations } from "vuex";
  export default {
    data () {
      return {
        nigiht_night: require('../../assets/PC_black/模式切换@2x(1).png'),// 黑夜黑
        nigiht_day: require('../../assets/PC_black/白天@2x(1).png'),// 黑夜白
        day_night: require('../../assets/PC_day/模式切换@2x(2).png'),// 白天黑
        day_day: require('../../assets/PC_day/白天@2x(2).png'),// 白天白
        day_more: require('../../assets/more.png'),
      }
    },
    computed: {

      isDay: {
        get() {
          return this.$store.state.isDay;
        },
        set(val) {
          this.$store.state.isDay = val;
        },
      },
    },
    methods: {
      // 白天黑夜切换
      dayNightChange (type) {
        console.log(type);
        // type 1晚上 2白天切换
        this.$store.commit('DAY_NIGHT_CHANGE',type);
      },

      showLeft () {
        this.$store.commit('SHOW_LEFT_MENU');
      }
    }
  }
</script>
<style lang="less" scoped>


  // header
  .jx-index-header {
    z-index: 99;

    .more {
      position: absolute;
      height: 20px;
      width: 20px;
      left: 17px;
      top: 22px;
      display: none;
    }
    .nNavbg;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 67Px;
    padding-right: 122px;
    display: flex;
    justify-content: flex-end;
    .jx-index-header-content {
      display: flex;
      align-items: center;

      >img {
        height: 20px;
        width: 20px;
        margin-right: 20px;
      }

      div {
        height: 33px;
        border-radius: 10px;
        background: #F79F1A;
        display: flex;
        justify-content: center;
        padding: 0px 15px;
        align-items: center;
        /*text-align: center;*/
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          /*line-height: 33px;*/
          color: #FFFFFF;
        }

        >img {
          width: 20px;
          height: 20px;
          margin-left: 10px;
        }

      }
    }

  }

  .isDay {
    .dNavbg;
  }
  // header

  @media screen and (max-width: 800px){

    .more {
      display: block!important;
    }
    .jx-index-header-content{

      >img {
        display: none;
      }



      .waller {
        position: absolute;
        right: 12px;
        top: 20px;
        padding: 10px!important;
        img {
          margin-left: 0px!important;
        }
        span {
          display: none!important;
        }
      }
    }
  }


</style>
